<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // var data = [
      //   { name: "张三", age: 20 },
      //   { name: "李四", age: 30 },
      // ];
      function ajax1() {
        return new Promise((resolve) => {
          setTimeout(() => {
            const users = [{ name: "张三" }, { name: "李四" }];
            resolve(users);
          }, 20);
        });
      }

      function ajax2(users) {
        return new Promise((resolve) => {
          setTimeout(() => {
            const ages = [{ age: 20 }, { age: 30 }];
            const res = users.map((user,index) => ({
              ...user,
              // age:Math.floor(Math.random()*50),
              ...ages[index],
            }));
            const ul = document.createElement("ul");
            res.forEach((user) => {
              const li = document.createElement("li");
              li.textContent = `${user.name} - ${user.age}`;
              ul.appendChild(li);
            });
            document.body.appendChild(ul);
            resolve();
          }, 30);
        });
      }

      ajax1().then(ajax2);

      // ajax1().then(res=>{ajax2(res)});
      
    </script>
  </body>
</html>
